<template>
  <div class="vaw-side-bar-wrapper">
    <div
      class="flex justify-center items-center py-10px"
      style="border-bottom: 1px dashed var(--color-border)"
    >
      <img :src="Logo" alt="" class="w-30px" /> <span>管理后台</span>
    </div>
    <!-- <component :is="tag"> -->
    <a-menu
      :style="{ width: '200px', height: '100%' }"
      :default-open-keys="['0']"
      :default-selected-keys="['0_1']"
      show-collapse-button
      :theme="theme"
      v-model:selectedKeys="defaultPath"
      v-model:openKeys="defaultExpandKeys"
      @menu-item-click="onMenuClick"
    >
      <template v-for="item of menuOptions" :key="item.key">

        <template v-if="!item.children">
          <a-menu-item :key="item.key">
            <template #icon>
              <component :is="item.icon || 'icon-menu'" />
            </template>
            {{ item.title }}
          </a-menu-item>
        </template>
        <template v-else>
          <SubMenu :key="item.key" :menu-info="item" />
        </template>
      </template>
    </a-menu>
    <!-- </component> -->
  </div>
</template>

<script setup>
import SubMenu from '../components/SubMenu.vue'
import Logo from '~/assets/image/logo.png'
import { getMenuList, getMenuListByRoleId } from '~/api/url'
import { post } from '~/api/http'
import { isExternal, transfromMenu } from '../../../utils'
import { useLayoutStore } from '../../index'
import { useRoute, useRouter } from 'vue-router'
import useUserStore from '~/store/modules/user'
import pinia from '~/store/pinia'
import { generatorRoutes} from '~/utils'
const userStore = useUserStore(pinia)
const route = useRoute()
const router = useRouter()

let menuOptions = ref()

const menuList = []
// function doRefresh() {
//   api
//     .post(getMenuList)
//     .then(data => {
//       menuOptions.value = data.data
//      console.log(menuOptions, 'menuOptions')
//     })
//     .catch(console.log)
// }

function getRoutes(){
return  post({
    url: getMenuListByRoleId,
    data: {
      userId: userStore.userId,
      roleId: userStore.roleId,
    },
  }).then(res => {
  return generatorRoutes(res.data)



    // menuOptions.value = res.data
  })
}
 console.log('getRoutes()',getRoutes());

 getRoutes().then(res=>{
   menuOptions.value = res

 })

// const store = useLayoutStore()
// console.log(store, 'store')
// const routes = computed(() => {
//   return store?.state.permissionRoutes.filter(it => !!it.name)
// })

// handleMenu(routes)

function onMenuClick(key) {
  console.log(key)
  if (isExternal(key)) {
    window.open(key)
  } else {
    router.push(key)
    // if (store.state.device === 'mobile') {
    //   // store.toggleCollapse(true)
    // }
  }
}

function handleMenu(routes) {
  menuList.length = 0
  const tempMenus = transfromMenu(routes || [])
  menuList.push(...tempMenus)
  console.log(menuList, 'menuOptions2')
}
</script>

<style scoped lang="less">
.vaw-side-bar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  overflow-x: hidden;
  height: 100%;
  box-sizing: border-box;
  z-index: 999;
  .vaw-menu-wrapper {
    overflow-x: hidden;
    color: white;
  }
}

:deep(.arco-menu-collapsed) {
  margin: 0 auto;
}
:deep(.arco-menu-vertical .arco-menu-item) {
  max-height: 40px;
}
.scrollbar {
  height: calc(100vh - @logoHeight) !important;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 0;
  }
}
</style>
